<template>
  <div >
    <div class="in-button"  @click="handleShowBox()"> 
      <span class="icon iconfont icon-guanlian title-icon"></span>
      <span >情报关联</span> </div>
    <transition name="draw">
      <div v-show=" boxshow  " class="info-wrap" draw="info-wrap"  >
        <div class="mainTitle"  @click="handleShowBox()">
          <span class="icon iconfont icon-guanlian"></span>
          <span >情报关联</span>
        </div>
        <div class="subTitle">
          <div>
            <span class="icon iconfont icon-qiye"></span>
            <span >关联企业</span>  
          </div>
          <div v-if="infoDataComList && infoDataComList.length > 0" class="more-data" @click='handleToList("com")'>查看更多...</div>
        </div>
        <div class="list-wrap">
          <ul v-if=" infoDataComList && infoDataComList.length > 0">
            <li v-for="(it,index) in infoDataComList" class="li-item" :key="index">{{it.name}}</li>
          </ul>
          <p v-else class="nodata-p">暂无数据</p>
        </div>
        <div class="subTitle">
          <div>
            <span class="icon iconfont icon-rencai"></span>
            <span >关联人才</span>  
          </div>
          <div v-if="infoDataPerlList && infoDataPerlList.length > 0" class="more-data" @click='handleToList("per")'>查看更多...</div>
        </div>
        <div class="list-wrap">
          <ul v-if=" infoDataPerlList &&  infoDataPerlList.length > 0">
            <li v-for="it in infoDataPerlList"  class="li-item" :key="it.pid"><span class="name">{{it.name}}</span><span>{{it.org}}</span></li>
          </ul>
          <p v-else class="nodata-p">暂无数据</p>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: ['showInfoDialog','infoDataCompanyList','infoDataPersonnelList','clickNodeId','currentNodeName'],
  data() {
    return {
      boxshow:false,
      infoDataComList:[],
      infoDataPerlList:[],
      mClickNodeId:'',
      nodeName:'',
    };
  },
  mounted(){
    this.infoDataComList = this.infoDataCompanyList;
    this.infoDataPerlList = this.infoDataPersonnelList;
    this.mClickNodeId = this.clickNodeId;
    this.nodeName = this.currentNodeName;
  },
  watch:{
    showInfoDialog:{
      handler:function(n,o){
        this.boxshow = n
      },
      immediate:true
    },
    infoDataCompanyList:{
       handler:function(n,o){
        this.infoDataComList = n;
      },
      immediate:true,
      deep:true
    },
    infoDataPersonnelList:{
       handler:function(n,o){
          this.infoDataPerlList = n;
      },
      immediate:true,
    },
    clickNodeId:{
       handler:function(n,o){
          this.mClickNodeId = n;
      },
      immediate:true,
    },
    currentNodeName:{
      handler:function(n,o){
          this.nodeName = n;
      },
      immediate:true,
    }
  },
  methods:{
    handleShowBox(){
      this.$emit('handleShowBox',!this.boxshow)
    },
    //跳转列表页
    handleToList(type){
      let newTab = this.$router.resolve({
        name:'PersAndCompList',
        query:{
          id:this.mClickNodeId,
          name:this.nodeName,
          tabType:type,
          pageType:"技术链",
        }
      })
      window.open(newTab.href, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
  .in-button{
    width: 1.2rem;
    line-height: 0.5rem;
    cursor: pointer;
    .title-icon{
      position: relative;
      top:2px;
    }
  }
  .search-wrap{
    position:absolute;
    left:0;
    top:0;
    padding-top:0.2rem;
  }
  
  .info-wrap{
    position:absolute;
    right:0;
    top:0;
    width:3rem;
    height:6rem;
    z-index:9;
    color:#fff;
    padding:0 0.15rem;
    background-color:rgba(0,0,0,0.7);
    
    .mainTitle{
      line-height:0.5rem;
      border-bottom:1px solid #ffffff;
      font-size:0.16rem;
      cursor: pointer;
      .icon{
        margin-right:0.1rem;
        font-size:0.2rem;
        position:relative;
        top:2px;
      }
    }
    .subTitle{
      display:flex;
      line-height:0.4rem;
      justify-content:space-between;
      border-bottom:1px solid #ffffff;
      font-size:0.14rem;
      .icon{
        margin-right:0.05rem;
        font-size:15px;
      }
      .more-data{
        font-size:0.12rem;
        cursor:pointer;
      }
    }
    .list-wrap{
      margin-bottom:0.4rem;
      .li-item{
        font-size:0.12rem;
        line-height:0.35rem;
        border-bottom:1px solid #ffffff;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        letter-spacing:1px;
        .name{
          margin-right:0.1rem;
          display:inline-block;
        }
      }
    }
  }

.draw-enter-active,.draw-leave-active {
  transition:all 1s ease-out;
}
.draw-enter,.draw-leave-to /* */{
  right:-3rem;
}
.nodata-p{
  text-align:center;
  line-height:0.4rem;
}
@media \0screen\,screen\9 {
  .info-wrap{
    background-color: #000;
    filter:Alpha(opacity=70);
    position:static;
    *zoom:1;
    li{
      position: relative;
    }
  }
}
</style>
